<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽屉 - 组件演示</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../components/drawer/drawer.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>🚀 openHarmony_Cordova_NutpiDesign</h1>
            <p class="subtitle">组件演示 - 抽屉</p>
        </header>

        <nav class="demo-nav">
            <a href="../index.html" class="nav-back">← 返回首页</a>
        </nav>

        <main class="main-content">
            <section class="demo-section">
                <h2>🎯 抽屉演示</h2>
                
                <div class="demo-container">
                    <div class="demo-item">
                        <h3>从右侧滑出</h3>
                        <button class="btn btn-primary" onclick="openRightDrawer()">打开抽屉</button>
                    </div>

                    <div class="demo-item">
                        <h3>从左侧滑出</h3>
                        <button class="btn btn-primary" onclick="openLeftDrawer()">打开抽屉</button>
                    </div>

                    <div class="demo-item">
                        <h3>从顶部滑出</h3>
                        <button class="btn btn-primary" onclick="openTopDrawer()">打开抽屉</button>
                    </div>

                    <div class="demo-item">
                        <h3>从底部滑出</h3>
                        <button class="btn btn-primary" onclick="openBottomDrawer()">打开抽屉</button>
                    </div>

                    <div class="demo-item">
                        <h3>无遮罩</h3>
                        <button class="btn btn-primary" onclick="openNoMaskDrawer()">打开抽屉</button>
                    </div>

                    <div class="demo-item">
                        <h3>自定义大小</h3>
                        <button class="btn btn-primary" onclick="openLargeDrawer()">打开抽屉</button>
                    </div>
                </div>
            </section>

            <section class="demo-section">
                <h2>使用代码</h2>
                <pre><code>// 1. 引入文件
&lt;link rel="stylesheet" href="components/drawer/drawer.css"&gt;
&lt;script src="components/drawer/drawer.js"&lt;/script&gt;

// 2. 初始化抽屉组件
const drawer = new Drawer({
    title: '抽屉标题',
    content: '抽屉内容',
    placement: 'right',
    onClose: () => {
        console.log('抽屉已关闭');
    }
});

// 3. 打开抽屉
drawer.open();

// 4. 关闭抽屉
drawer.close();

// 5. 更新内容
drawer.setContent('新内容');

// 6. 更新标题
drawer.setTitle('新标题');</code></pre>
            </section>
        </main>

        <footer class="footer">
            <p>&copy; 2025 OpenHarmony 三方库适配中心 | MIT License</p>
        </footer>
    </div>

    <script src="../components/drawer/drawer.js"></script>
    <script>
        // 从右侧滑出
        function openRightDrawer() {
            const drawer = new Drawer({
                title: '右侧抽屉',
                content: `
                    <p>这是一个从右侧滑出的抽屉。</p>
                    <p>抽屉可以包含任何 HTML 内容，比如表单、列表、文本等。</p>
                    <p>点击遮罩或关闭按钮可以关闭抽屉。</p>
                `,
                placement: 'right',
                onClose: () => {
                    console.log('右侧抽屉已关闭');
                }
            });
            drawer.open();
        }

        // 从左侧滑出
        function openLeftDrawer() {
            const drawer = new Drawer({
                title: '左侧抽屉',
                content: `
                    <p>这是一个从左侧滑出的抽屉。</p>
                    <p>可以用于导航菜单、侧边栏等场景。</p>
                    <p>抽屉会自动禁止背景滚动。</p>
                `,
                placement: 'left',
                onClose: () => {
                    console.log('左侧抽屉已关闭');
                }
            });
            drawer.open();
        }

        // 从顶部滑出
        function openTopDrawer() {
            const drawer = new Drawer({
                title: '顶部抽屉',
                content: `
                    <p>这是一个从顶部滑出的抽屉。</p>
                    <p>适合展示通知、公告等内容。</p>
                    <p>支持自定义高度。</p>
                `,
                placement: 'top',
                height: '300px',
                onClose: () => {
                    console.log('顶部抽屉已关闭');
                }
            });
            drawer.open();
        }

        // 从底部滑出
        function openBottomDrawer() {
            const drawer = new Drawer({
                title: '底部抽屉',
                content: `
                    <p>这是一个从底部滑出的抽屉。</p>
                    <p>常用于移动端的操作菜单。</p>
                    <p>可以设置自定义高度。</p>
                `,
                placement: 'bottom',
                height: '300px',
                onClose: () => {
                    console.log('底部抽屉已关闭');
                }
            });
            drawer.open();
        }

        // 无遮罩
        function openNoMaskDrawer() {
            const drawer = new Drawer({
                title: '无遮罩抽屉',
                content: `
                    <p>这是一个没有遮罩层的抽屉。</p>
                    <p>背景内容仍然可见。</p>
                    <p>但仍然会禁止背景滚动。</p>
                `,
                placement: 'right',
                mask: false,
                onClose: () => {
                    console.log('无遮罩抽屉已关闭');
                }
            });
            drawer.open();
        }

        // 自定义大小
        function openLargeDrawer() {
            const drawer = new Drawer({
                title: '大抽屉',
                content: `
                    <p>这是一个自定义大小的抽屉。</p>
                    <p>宽度设置为 600px。</p>
                    <p>可以根据需要调整大小。</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
                `,
                placement: 'right',
                width: '600px',
                onClose: () => {
                    console.log('大抽屉已关闭');
                }
            });
            drawer.open();
        }
    </script>

    <style>
        .demo-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }

        .demo-item {
            background: var(--bg-light);
            padding: 16px;
            border-radius: 8px;
            overflow: visible;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 120px;
        }

        .demo-item h3 {
            margin-top: 0;
            margin-bottom: 16px;
            font-size: 16px;
            color: var(--text-primary);
            width: 100%;
            text-align: center;
        }

        .btn {
            padding: 10px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: var(--transition);
        }

        .btn-primary {
            background: var(--primary-color);
            color: white;
        }

        .btn-primary:hover {
            opacity: 0.9;
        }

        @media (max-width: 768px) {
            .demo-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</body>
</html>
